Vuelidate — More Complex Custom Validators

Vue.js doesn’t come with any form validation capabilities by default.

Therefore, we need to add our own form validation library or with our own code.

In this article, we’ll look at how to create custom validators with Vuelidate.

Accessing Component

We can access the whole component’s model with Vuelidate.

For example, we can write:

<template>
  <div id="app">
    <div>
      <label>name</label>
      <input v-model.trim="$v.name.$model">
      <div v-if="!$v.name.mustBeCool">name is invalid.</div>
    </div>

<div>
      <label>field</label>
      <input v-model.trim="$v.field.$model">
    </div>
  </div>
</template>
<script>
import { helpers } from "vuelidate/lib/validators";

const contains = param =>
  helpers.withParams(
    { type: "contains", value: param },
    (value, vm) => !helpers.req(value) || vm[param.field].includes(param.text)
  );
export default {
  name: "App",
  data() {
    return {
      name: "",
      field: ""
    };
  },
  validations: {
    name: {
      mustBeCool: contains({ text: "cool", field: "field" })
    },
    field: {}
  }
};
</script>

to add a validator that checks if the field field has the word 'cool' in it.

Is it is, then the field that uses the contains validator is valid if the field field has the word 'cool' in it.

vm has the component’s view model, which has the states.

Regex Based Validator

We can add validation based on regex.

For example, we can write:

<template>
  <div id="app">
    <div>
      <label>name</label>
      <input v-model.trim="$v.name.$model">
      <div v-if="!$v.name.alpha">name is invalid.</div>
    </div>
  </div>
</template>
<script>
import { helpers } from "vuelidate/lib/validators";

const alpha = helpers.regex("alpha", /^[a-zA-Z]*$/);

export default {
  name: "App",
  data() {
    return {
      name: ""
    };
  },
  validations: {
    name: {
      alpha
    }
  }
};
</script>

We added the alpha validator to check if the inputted value is all alphabetical.

Locator Based Validator

Also, we can validate with the locator strategy.

For example, we can write:

<template>
  <div id="app">
    <div>
      <label>name</label>
      <input v-model.trim="$v.password.$model">
    </div>

    <div>
      <label>confirm password</label>
      <input v-model.trim="$v.confirmPassword.$model">
      <div v-if="!$v.confirmPassword.same">confirm pasword must be the same as password.</div>
    </div>
  </div>
</template>
<script>
import { helpers } from "vuelidate/lib/validators";

const sameAs = equalTo =>
  helpers.withParams({ type: "sameAs", eq: equalTo }, function(
    value,
    parentVm
  ) {
    return value === helpers.ref(equalTo, this, parentVm);
  });

export default {
  name: "App",
  data() {
    return {
      password: "",
      confirmPassword: ""
    };
  },
  validations: {
    password: {},
    confirmPassword: {
      same: sameAs("password")
    }
  }
};
</script>

The helper.ref method checks if 2 fields are equal to each other with the equalTo parameter.

The equalTo parameter has the field name to check for in order to determine if it’s the same as that field.

So equalTo would be 'password' since we want to check if it’s the same as 'password' .

We return the condition to compare if the other field’s value is the same as what we inputted into the given field.

Conclusion

We can create our own custom validators with various strategies with Vuelidate.